<template>
  <bm-overlay
    ref="customOverlay"
    :class="{ sample: true, active }"
    pane="labelPane"
    @draw="draw"
  >
    <div v-text="`${text.label}区`" style="height: 25px"></div>
    <div v-text="`${text.count}套`" style="height: 25px"></div>
  </bm-overlay>
</template>

<script>
export default {
  name: 'MyOverlay',
  props: ['text', 'position', 'active'],
  watch: {
    position: {
      handler () {
        this.$refs.customOverlay.reload()
      },
      deep: true
    }
  },
  methods: {
    draw ({ el, BMap, map }) {
      const { lng, lat } = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    }
  }
}
</script>

<style>
.sample {
  width: 70px;
  height: 70px;
  line-height: 50px;
  background: rgba(36, 185, 111, 0.9);
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 70px;
  color: #fff;
  font-size: 15px;
  text-align: center;
  padding: 6px;
  position: absolute;
}
</style>
